<template>
  <div class="common-layout">
    <div class="layout-head">
      <div class="logo-wrap">
        <img src="../assets/images/xmzt.png" alt="" class="title">
      </div>
      <div class="menu-wrap">
        <div 
          v-for="(item, index) in menus" 
          :key="index" 
          class="item"
          :class="{
            active: item === active,
            'item-1': index === 0,
            'item-2': index === 1,
            'item-3': index === 2,
          }"
          @click="changeMenu(item)"
        />
      </div>
      <div class="time-wrap">
        <span v-for="(item,index) in time" :key="index">{{ item }}</span>
      </div>
    </div>
    <div class="layout-content">
      <div class="left">
        <router-view />
      </div>
      <div class="center" :class="{ 'center-1': active === '/', 'center-2': active !== '/' }">
        <video-record />
      </div>
      <div v-if="active === '/'" class="right">
        <div class="top">
          <alarm-week-charts />
        </div>
        <div class="bottom">
          <rank-list />
        </div>
      </div>
    </div>
    <div class="layout-bottom"></div>
  </div>
</template>

<script>
import alarmWeekCharts from '@/components/alarm-week-charts'
import videoRecord from '@/components/video-record'
import rankList from '@/components/rank-list'

export default {
  name: 'common-layout',
  data() {
    return {
      active: '/',
      menus: ['/', '/driving', '/trolley'],
      time: []
    }
  },
  components: {
    alarmWeekCharts,
    videoRecord,
    rankList
  },
  methods: {
    skip(row) {
      this.$router.push(row.url)
    },
    changeMenu(path) {
      if (this.active !== path) {
        this.active = path
        this.$router.push(path)
      }
    },
    getTime() {
      const curDate = new Date()
      const weekList = ['日','一','二','三','四','五','六']
      const date = curDate.toLocaleDateString().split('/').reduce((a, v) => [...a, Number(v) > 9 ? v : '0' + v], []).join('-'),
      time = curDate.toLocaleTimeString(),
      week = curDate.getDay()
      this.time = [date, time, '星期' + weekList[week]]
      requestAnimationFrame(this.getTime.bind(this))
    }
  },
  created() {
    this.active = this.$route.path
    this.getTime()
  }
}
</script>

<style lang="scss">
.common-layout {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  .layout-head {
    width: 100%;
    height: 1.18rem;
    background: url('../assets/images/dbt_bg.png') center no-repeat;
    background-size: auto 100%;
    overflow: hidden;
    margin-bottom: 0.2rem;
    .logo-wrap {
      overflow: hidden;
      float: left;
      width: 9.06rem;
      .title {
        width: 5.34rem;
        height: 0.7rem;
        display: block;
        margin-left: 0.3rem;
        margin-top: 0.32rem;
      }
    }
    .menu-wrap {
      padding-top: 0.5rem;
      overflow: hidden;
      float: left;
      .item {
        width: 2.2rem;
        height: 0.68rem;
        float: left;
        margin-right: 0.2rem;
        background: url('../assets/images/menus.png') no-repeat;
        background-size: 300% 200%;
        cursor: pointer;
        transition: all 300ms;
        &.item-2 {
          background-position-x: center;
        }
        &.item-3 {
          background-position-x: right;
          margin-right: 0;
        }
        &.active {
          background-position-y: bottom;
        }
      }
    }
    .time-wrap {
      float: right;
      font-size: 0.14rem;
      color: rgba(#FFFFFF,.8);
      line-height: 0.24rem;
      margin-right: 0.2rem;
      span {
        padding: 0 4px;
      }
    }
  }
  .layout-content {
    width: 100%;
    padding: 0 0.24rem;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    .left {
      width: 4.72rem;
      height: 8.72rem;
      background: url('../assets/images/bg_sbxxzl.png') center no-repeat;
      background-size: 100% 100%;
      margin-right: 0.14rem;
      box-sizing: border-box;
      padding: 1.06rem 0.36rem 0;
    }
    .center {
      flex: 1;
      height: 8.17rem;
      margin-top: 0.04rem;
      &.center-1 {
        background: url('../assets/images/bg1_sp.png') center no-repeat;
        background-size: 100% 100%;
      }
      &.center-2 {
        background: url('../assets/images/bg2_sp.png') center no-repeat;
        background-size: 100% 100%;
      }
    }
    .right {
      margin-left: 0.13rem;
      width: 4.72rem;
      .top {
        width: 100%;
        height: 3.83rem;
        margin-bottom: 0.12rem;
        background: url('../assets/images/bj_yzyjqk.png') center no-repeat;
        background-size: 100% 100%;
        box-sizing: border-box;
        padding: 0.8rem 0.36rem 0.5rem;
        overflow: hidden;
      }
      .bottom {
        width: 100%;
        height: 4.78rem;
        margin-bottom: 0.12rem;
        background: url('../assets/images/bg_jgsbtop.png') center no-repeat;
        background-size: 100% 100%;
        padding: 1.02rem 0.36rem 0;
        box-sizing: border-box;
        overflow: hidden;
      }
    }
  }
  .layout-bottom {
    width: 18.60rem;
    height: 0.38rem;
    position: absolute;
    bottom: 0.28rem;
    left: 50%;
    transform: translateX(-50%);
    background: url('../assets/images/dnzs.png') center no-repeat;
    background-size: 100% 100%;
  }
}
</style>